<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue列表过渡</title>
	<script src="js/vue.js"></script>
	<style>
		.v-enter,.v-leave-to{
			opacity: 0;
		}
		.v-enter-active,.v-leave-active{
			-webkit-transition: opacity 1s;
			transition: opacity 1s;
		}
	</style>
</head>
<body>
<div id="app">
<transition-group>
	<div v-for="(item,index) of list" :key="item.id">
		{{item.title}}
	</div>
</transition-group>
<button @click="handleBtnClick">Add</button>
</div>
<script>
var count = 0;
const app = new Vue({
    el:"#app",
	data:{
     list:[]
	},
	methods:{
    	handleBtnClick:function(){
    	this.list.push({
		    id: count ++,
		    title: 'Sey hello'
	    })
	    }
	}
})
</script>
</body>
<!--
列表过渡动画
<transition-group></transition-group>
-->
<!--
/* this.type = (this.type === 'child' ? 'childone' : 'child')*/
-->
</html>